@let generatingTemplate = generatingTemplate$ | async;
@let generatingEndpoint = generatingEndpoint$ | async;
@let updateVersion = updateAvailable$ | async;
@let platform = platform$ | async;
@let uiState = uiState$ | async;
@let showFeedback = showFeedback$ | async;

<div class="footer d-flex">
  <div class="d-flex me-auto">
    @if (updateVersion) {
      <div class="footer-item d-flex align-items-center px-2">
        <p class="mb-0">
          <app-svg icon="update"></app-svg> Update available
          <a href="{{ releaseUrl + updateVersion + '/' }}" target="_blank">
            View changelog
          </a>
        </p>
        <button
          class="btn btn-custom btn-xs ms-2 text-success"
          (click)="applyUpdate()"
        >
          {{ platform === 'win32' ? 'Install' : 'Download' }}
        </button>
      </div>
    }
  </div>

  @if (uiState.closing || uiState.saving) {
    <div class="footer-item d-flex align-items-center px-2">
      <div class="footer-save animation-flash">
        <app-svg icon="save" class="me-2"></app-svg>
        @if (uiState.closing) {
          Shutting down...
        }
        @if (uiState.saving) {
          Saving...
        }
      </div>
    </div>
  }

  @if (generatingTemplate !== 'NONE') {
    <div class="footer-item d-flex align-items-center px-2">
      @if (generatingTemplate === 'DONE') {
        <button
          class="btn btn-custom btn-xs text-success"
          (click)="openTemplateModal('GENERATE_TEMPLATE')"
        >
          <app-svg icon="magic" class="me-2"></app-svg>
          Template generated
        </button>
      }
      @if (generatingTemplate === 'INPROGRESS') {
        <button
          class="btn btn-custom btn-xs text-warning d-flex align-items-center"
          (click)="openTemplateModal('GENERATE_TEMPLATE')"
        >
          <app-spinner class="me-2"></app-spinner>
          Generating template
        </button>
      }
    </div>
  }

  @if (generatingEndpoint !== 'NONE') {
    <div class="footer-item d-flex align-items-center px-2">
      @if (generatingEndpoint === 'DONE') {
        <button
          class="btn btn-custom btn-xs text-success"
          (click)="openTemplateModal('GENERATE_ENDPOINT')"
        >
          <app-svg icon="magic" class="me-2"></app-svg>
          Endpoint generated
        </button>
      }
      @if (generatingEndpoint === 'INPROGRESS') {
        <button
          class="btn btn-custom btn-xs text-warning d-flex align-items-center"
          (click)="openTemplateModal('GENERATE_ENDPOINT')"
        >
          <app-spinner class="me-2"></app-spinner>
          Generating endpoint
        </button>
      }
    </div>
  }

  @if (showFeedback) {
    <div class="footer-item d-flex align-items-center px-2">
      <button
        class="btn btn-link btn-icon btn-xs"
        (click)="openFeedbackModal()"
        ngbTooltip="Get priority support"
      >
        <app-svg icon="help_outline"></app-svg>
      </button>
    </div>
  }

  <div class="footer-item d-flex align-items-center px-2">
    <button
      class="btn btn-link btn-icon btn-xs"
      (click)="openChangelogModal()"
      ngbTooltip="Open changelog"
    >
      {{ `v${version}` }}
    </button>
  </div>
</div>
